<template>
	<view class="page">
		<u-card padding="0" :border="false" margin="0" border-radius="0" :foot-border-top="false"
			:head-border-bottom="false">
			<view class="card-head" slot="head">询价单信息</view>
			<view class="card-body" slot="body">
				<view class="u-body-item">
					<view class="item">
						<view class="title">发货企业:</view>
						<view class="info">{{inquiryInfo.shippingEnterprise||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">发货地址:</view>
						<view class="info">{{inquiryInfo.shippingAddress||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">到货企业:</view>
						<view class="info">{{inquiryInfo.arrivalEnterprise||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">到货地址:</view>
						<view class="info">{{inquiryInfo.arrivalAddress||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">运输方式:</view>
						<view class="info">{{inquiryInfo.shippingType||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">产品名称:</view>
						<view class="info">{{inquiryInfo.productName||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">净重:</view>
						<view class="info">{{inquiryInfo.netWeight||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">工业/电子:</view>
						<view class="info">{{inquiryInfo.industry||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">危化品/普货:</view>
						<view class="info">{{inquiryInfo.goodsType||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">运费类型:</view>
						<view class="info">{{inquiryInfo.freightType||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">交付/询价要求:</view>
						<view class="info">{{inquiryInfo.delivery||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">询价响应截止日期:</view>
						<view class="info">{{inquiryInfo.endTime||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">询价有效期:</view>
						<view class="info">{{inquiryInfo.effectiveTime||''}}</view>
					</view>
				</view>
			</view>
		</u-card>
		<u-card padding="0" :border="false" margin="0" border-radius="0" :foot-border-top="false"
			:head-border-bottom="false">
			<view class="card-head" slot="head">报价信息</view>
			<view class="card-body" slot="body" v-if="workflowId === '1'">
				<view class="u-body-item">
					<view class="item">
						<view class="title">报价:</view>
						<view class="info">{{quotedInfo.quotedPrice||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">报价说明:</view>
						<view class="info">{{quotedInfo.quoteDescription||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">备注:</view>
						<u-button :custom-style="customStyle" plain size="mini" @click="view(quotedInfo.remark)">
							查看备注
						</u-button>
					</view>
				</view>
			</view>
			<view class="card-body" slot="body" v-else-if="workflowId === '2'">
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤1吨:</view>
						<view class="info">{{quotedInfo.quotedPrice1||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤3吨:</view>
						<view class="info">{{quotedInfo.quotedPrice2||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤5吨:</view>
						<view class="info">{{quotedInfo.quotedPrice3||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤10吨:</view>
						<view class="info">{{quotedInfo.quotedPrice4||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤15吨:</view>
						<view class="info">{{quotedInfo.quotedPrice5||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤20吨:</view>
						<view class="info">{{quotedInfo.quotedPrice6||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤25吨:</view>
						<view class="info">{{quotedInfo.quotedPrice7||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤30吨:</view>
						<view class="info">{{quotedInfo.quotedPrice8||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">报价说明:</view>
						<view class="info">{{quotedInfo.quoteDescription||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">备注:</view>
						<u-button :custom-style="customStyle" plain size="mini" @click="view(quotedInfo.remark)">
							查看备注
						</u-button>
					</view>
				</view>
			</view>
			<view class="card-body" slot="body" v-else-if="workflowId === '3'">
				<view class="card-body-btn">
					<u-button plain size="medium" @click="viewQuotedDetails">
						报价详情
					</u-button>
					<u-button :custom-style="customStyle" v-if="inquiryInfo.quotationStatus !== '待报价' && timeTo" plain
						size="medium" @click="viewRanking()">
						查看排名
					</u-button>
				</view>
			</view>
		</u-card>
		<u-card v-if="workflowId !== '3'" padding="0" :border="false" margin="0" border-radius="0"
			:foot-border-top="false" :head-border-bottom="false">
			<view class="card-head" slot="head">议价信息</view>
			<view class="card-body" slot="body" v-if="workflowId === '1'">
				<view class="u-body-item">
					<view class="item">
						<view class="title">报价:</view>
						<view class="info">{{negotiationInfo.quotedPrice||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">报价说明:</view>
						<view class="info">{{negotiationInfo.quoteDescription||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">备注:</view>
						<u-button :custom-style="customStyle" plain size="mini" @click="view(negotiationInfo.remark)">
							查看备注
						</u-button>
					</view>
				</view>
			</view>
			<view class="card-body" slot="body" v-else-if="workflowId === '2'">
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤1吨:</view>
						<view class="info">{{negotiationInfo.quotedPrice1||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤3吨:</view>
						<view class="info">{{negotiationInfo.quotedPrice2||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤5吨:</view>
						<view class="info">{{negotiationInfo.quotedPrice3||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤10吨:</view>
						<view class="info">{{negotiationInfo.quotedPrice4||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤15吨:</view>
						<view class="info">{{negotiationInfo.quotedPrice5||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤20吨:</view>
						<view class="info">{{negotiationInfo.quotedPrice6||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤25吨:</view>
						<view class="info">{{negotiationInfo.quotedPrice7||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">≤30吨:</view>
						<view class="info">{{negotiationInfo.quotedPrice8||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">报价说明:</view>
						<view class="info">{{negotiationInfo.quoteDescription||''}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">备注:</view>
						<u-button :custom-style="customStyle" plain size="mini" @click="view(negotiationInfo.remark)">
							查看备注
						</u-button>
					</view>
				</view>
			</view>
		</u-card>
		<view class="footer" v-if="workflowId !=='3'">
			<view class="u-footer">
				<view></view>
				<!-- <u-button type="primary" size="medium">查看排名</u-button> -->
				<u-button type="primary" v-if="inquiryInfo.quotationStatus !== '待报价' && timeTo" @click="viewRanking()"
					plain size="medium">
					查看排名
				</u-button>
				<u-button type="primary" v-if="inquiryInfo.quotationStatus ==='待报价'" size="medium"
					@click="offer(inquiryInfo.id,'add')">报价</u-button>
				<u-button type="primary" v-else-if="inquiryInfo.quotationStatus ==='待接受'" size="medium"
					@click="offer(inquiryInfo.id,'edit')">修改报价</u-button>
			</view>
		</view>
		<remarkPopup ref="remarkPopup" />
		<offerPopup ref="offerPopup" @callback="getData" />
		<rankingPopup ref="rankingPopup" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import remarkPopup from "../../components/remark-popup.vue"
	import offerPopup from "../../components/offer-popup.vue"
	import rankingPopup from "./rankingPopup.vue"
	export default {
		data() {
			return {
				inquiryInfo: {},
				quotedInfo: {}, //报价信息
				negotiationInfo: {}, //议价信息
				id: "",
				workflowId: '1',
				customStyle: {
					marginLeft: '20rpx',
				},
			}
		},
		components: {
			remarkPopup,
			offerPopup,
			rankingPopup
		},
		computed: {
			//到时间 才可查看排名
			timeTo() {
				let endTime = (new Date(this.inquiryInfo.endTime)).getTime()
				let nowTime = (new Date()).getTime()
				return endTime <= nowTime
			}
		},
		onLoad(option) {
			this.id = option.id
			this.workflowId = option.workflowId
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中'
				})
				this.$u.api.carrier.getNewInquiryDetail({
					id: this.id,
				}).then(data => {
					uni.hideLoading()
					if (data.code === 200 && data.success) {
						this.inquiryInfo = data.data;
					}
				}).catch(() => {
					uni.hideLoading()
				})
				if (this.workflowId !== '3') {
					this.$u.api.carrier.getNewInquiryQuoted({
						id: this.id,
					}).then(data => {
						uni.hideLoading()
						if (data.code === 200 && data.success) {
							this.quotedInfo = data.data;
						}
					}).catch(() => {
						uni.hideLoading()
					})
					this.$u.api.carrier.getNegotiationDetails({
						id: this.id,
					}).then(data => {
						uni.hideLoading()
						if (data.code === 200 && data.success) {
							this.negotiationInfo = JSON.parse(data.data.quotation);
						}
					}).catch(() => {
						uni.hideLoading()
					})
				}

			},
			view(item) {
				uni.navigateTo({
					url: `./inquirItemDetail?id=${this.id}&itemId=${item.id}&itemNo=${item.itemNo}&enquiryStatus=${this.enquiryVO.enquiryStatus}`
				})
			},
			submit() {
				uni.showModal({
					title: `是否确定提交该询价?`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							})
							this.$u.api.carrier.submitInquiry(this.id).then(data => {
								uni.hideLoading()
								if (data.code === 200 && data.success) {
									this.$refs.uToast.show({
										title: data.msg,
										type: 'success',
										duration: 1000
									})
									this.getData()
								} else {
									this.$refs.uToast.show({
										title: data.msg,
										type: 'warning',
										duration: 1000
									})
								}
							}).catch(() => {
								uni.hideLoading()
							})
						}
					}
				})
			},
			//查看备注
			view(remark) {
				this.$refs.remarkPopup.open('备注', remark)
			},
			//报价
			offer(id, type) {
				uni.navigateTo({
					url: `./quoted?id=${id}&type=${type}&workflowId=${this.workflowId}`
				})
			},
			//报价详情
			viewQuotedDetails() {
				uni.navigateTo({
					url: `quotedDetails?id=${this.id}&detailId=${this.inquiryInfo.detailId}`
				})
			},
			//查看排名
			viewRanking() {
				this.$refs.rankingPopup.open(this.id)
			}
		}
	}
</script>

<style lang="scss">
	.page {
		min-height: 100vh;
		width: 750rpx;
		background-color: #f9f9f9;
		padding-top: 20rpx;
		padding-bottom: 40rpx;
		box-sizing: border-box;

		.card-head {
			color: $uni-color-primary;
			font-size: 38rpx;
			font-weight: 600;
			padding: 30rpx 0;
			width: 690rpx;
			margin: 0 auto;
			border-bottom: 4rpx solid $uni-color-primary;
		}

		.card-body {
			width: 750rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.card-body-btn {}

			.table {
				width: 100%;
				border: 2rpx solid #e4e7ed;
				display: table;

				.tr {
					width: 100%;
					display: table-row;

					:last-child {
						border-right-width: 0 !important;
					}

					.th {
						width: 16.66%;
						display: table-cell;
						vertical-align: middle;
						text-align: center;
						font-size: 28rpx;
						color: #303133;
						font-weight: bold;
						background-color: #f5f6f8;
						text-align: center;
						padding: 10rpx 6rpx;
						border-bottom: solid 2rpx #e4e7ed;
						border-right: solid 2rpx #e4e7ed;
						word-break: break-all;
					}

					.td {
						width: 16.66%;
						display: table-cell;
						vertical-align: middle;
						text-align: center;
						font-size: 26rpx;
						color: #606266;
						text-align: center;
						padding: 10rpx 6rpx;
						border-right: solid 2rpx #e4e7ed;
						word-break: break-all;
					}
				}
			}
		}

		.u-body-item {
			font-size: 28rpx;
			color: #999999;
			width: 100%;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 750rpx;
			box-sizing: border-box;

			.item {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.title {
					width: 260rpx;
				}

				.info {
					width: 430rpx;
					color: #333333;
					word-break: break-all;
				}
			}

		}

		.footer {
			width: 750rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;

			.u-footer {
				display: flex;
				justify-content: space-between;
			}
		}

	}
</style>
